<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts';
  import { getBarGraphCount } from 'api/reportStatistics/investorReport/index';
  require('echarts/theme/macarons'); // echarts 主题
  const animationDuration = 3000;
  import { debounce } from 'utils';
  export default {
    props: {
      channel: {
        type: String,
        default: ''
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '400px'
      }
    },
    data() {
      return {
        chart: null,
        time: [],
        data1: [],
        data2: [],
        data3: [],
        data4: [],
        data5: [],
        data6: [],
        data7: [],
        data8: [],
        data9: [],
        data10: [],
        data12: []
      };
    },
    computed: {
      getOptions() {
        return {
          color: ['#f2ad86', '#8ecac8', '#88cbf5', '#93c7a3', '#f8ec80', '#7896f8', '#ec6a6a', '#88cbf5', '#f2ad86', '#93c7a3', '#f8ec80'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            height: 80,
            data: [
              this.$t('loanPlanReport.data1'),
              this.$t('loanPlanReport.data2'),
              this.$t('loanPlanReport.data3'),
              this.$t('loanPlanReport.data4'),
              this.$t('loanPlanReport.data5'),
              this.$t('loanPlanReport.data6'),
              this.$t('loanPlanReport.data7'),
              this.$t('loanPlanReport.data8'),
              this.$t('loanPlanReport.data9'),
              this.$t('loanPlanReport.data10'),
              this.$t('loanPlanReport.data12')]
          },
          calculable: true,
          grid: {
            top: 90,
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.time,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'log',
            name: '数量',
            nameTextStyle: {
              fontSize: 16
            }
          }],
          series: [{
            name: this.$t('loanPlanReport.data1'),
            type: 'bar',
            barGap: 0,
            data: this.data1,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data2'),
            type: 'bar',
            barGap: 0,
            data: this.data2,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data3'),
            type: 'bar',
            barGap: 0,
            data: this.data3,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data4'),
            type: 'bar',
            barGap: 0,
            data: this.data4,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data5'),
            type: 'bar',
            barGap: 0,
            data: this.data5,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data6'),
            type: 'bar',
            barGap: 0,
            data: this.data6,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data7'),
            type: 'bar',
            barGap: 0,
            data: this.data7,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data8'),
            type: 'bar',
            barGap: 0,
            data: this.data8,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data9'),
            type: 'bar',
            barGap: 0,
            data: this.data9,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data10'),
            type: 'bar',
            barGap: 0,
            data: this.data10,
            animationDuration
          }, {
            name: this.$t('loanPlanReport.data12'),
            type: 'bar',
            barGap: 0,
            data: this.data12,
            animationDuration
          }]
        }
      }
    },
    watch: {
      channel(newVal) {
        if (this.chart && newVal) {
          this.loadData()
        }
      }
    },
    mounted() {
      this.initChart();
      if (this.autoResize) {
        this.__resizeHanlder = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHanlder)
      }

      // 监听侧边栏的变化
      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHanlder)
      }

      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)

      this.chart.dispose()
      this.chart = null
    },
    methods: {
      loadData() {
        this.clearDataArr()
        getBarGraphCount({
          channel: this.channel
        }).then(res => {
          if (res.status === 200) {
            res.data.forEach(item => {
              // console.log(item)
              item.crtTime = item.crtTime.replace(/\s[\x00-\xff]*/g, '')
              this.time.push(item.crtTime)
              // 日注册量
              this.data1.push(item.dayRegisterNum)
              // 有申请的订单的客户量
              this.data2.push(item.beApplyCustomerNum)
              // 新客户量
              this.data3.push(item.newCustomerNum)
              // 续贷客户量
              this.data4.push(item.oldCustomerNum)
              // 注册总量
              this.data5.push(item.registerTotal)
              // 续贷客户通过量
              this.data6.push(item.oldCustomerPassNum)
              // 日放款客户量
              this.data7.push(item.dayLoanCustomerNum)
              // 新客户和续贷客户通过量之和
              this.data8.push(item.newAndOldCostomerPassNum)
              // 日放款金额
              this.data9.push(item.dayLoanAmt)
              // 新客户通过量
              this.data10.push(item.newCustomerPassCount)
              // 未提单用户量
              this.data12.push(item.noOrderCustomerCount)
            })
            this.chart.setOption(this.getOptions)
          }
        })
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        this.chart.setOption(this.getOptions)
      },
      clearDataArr() {
        this.time = []
        this.data1 = []
        this.data2 = []
        this.data3 = []
        this.data4 = []
        this.data5 = []
        this.data6 = []
        this.data7 = []
        this.data8 = []
        this.data9 = []
        this.data10 = []
        this.data12 = []
      }
    }
}
</script>